<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="工具名称" width="100">
    </el-table-column>
    <el-table-column prop="borrowDate" label="借用时间" width="180">
    </el-table-column>
    <el-table-column prop="returnDate" label="归还时间"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small"
          >预约归还</el-button
        >
        <el-button type="text" size="small">申请续借</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import Vue from "vue";
import Element from "element-ui";
export default {
  data() {
    return {
      tableData: [
        {
          name: "DP801",
          recordID: "12",
          toolID: "DP801-1",
          borrowDate: "2020-05-02",
          returnDate: "2021-05-02",
        },
        {
          name: "电烙铁",
          recordID: "13",
          toolID: "DLT-123",
          borrowDate: "2020-05-02",
          returnDate: "2021-05-02",
        },
      ],
    };
  },
};
</script>